<template>
    <div>
<!--        <pre>{{albumList}}</pre>-->
        <hr/>
        <div v-for="(album, index) in albumList" :key="'album' + index">
            <el-link  style="margin-bottom:5px;" @click="gotoDetail(album)">{{index + 1}}、{{album.title}}</el-link>
        </div>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "audio1",
        data() {
            return {
                albumList: [],
            }
        },
        methods:{
            async getAlbumList() {
                let response = await axios.get( 'http://ddup4.com/albumData_back/allAlbumTitle.json')
                this.albumList = response.data.filter(album => album.title.includes('语文') || album.title.includes('数学') || album.title.includes('英语') || album.title.includes('科学'))
            },
            gotoDetail(album) {
                let routeUrl = this.$router.resolve({
                    path: 'audioDetail',
                    query: {
                        albumId: album.id,
                        albumTitle: album.title,
                    }
                })
                window.location = routeUrl.href
            }
        },
        mounted() {
            this.getAlbumList()
        }
    }
</script>

<style scoped>

</style>
